<template>
	<view>
		<!--准备界面-->
		<view v-if="allReady" class="waitPage">
			<view class="headLine clear">
				<view class="hoster left">房主： 正南</view>
				<view class="romID right">房间ID： 110</view>
			</view>
			<view class="romBody" style="text-align: center;">
				<view class="card1 card">
					<view class="label">我方</view>
					<view class="playerInfo">
						<view class="photo">
							<image src="../../static/img/login/logo.png"></image>
						</view>
						<view class="playerName">小新</view>
						<view class="readyStatues">已经准备好了</view>
					</view>
				</view><!--
				--><view class="card2 card">
					<view class="label">对方</view>
					<view class="playerInfo">
						<view class="photo">
							<image v-if="oppenent" src="../../static/img/login/logo.png"></image>
							<image v-else :src="'/images/competition/who.png'|remoteImgSource"></image>
						</view>
						<view class="playerName">小新</view>
						<view class="inviteBtn" v-if="oppenent">邀请好友</view>
						<view class="readyStatues" v-else>等待好友加入</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 54px;">
				<cos-btn text="马上开始" :disabled="ready" @sure="start"></cos-btn>
			</view>
		</view>
	
		<!--答题界面-->
		<view v-else class="playingPage">
			<!--计分板-->
			<view class="scoreboard center">
				<view class="player player1">
					<view class="label">我方</view>
					<view class="playerInfo">
						<view class="picture">
							<image src="../../static/img/login/logo.png"></image>
						</view>
						<view class="name ellipsis">小新</view>
					</view>
					<view class="score">分数 5</view>
				</view><!--急急如律令
				--><view class="player player2">
					<view class="label">对方</view>
					<view class="playerInfo">
						<view class="picture">
							<image src="../../static/img/login/logo.png"></image>
						</view>
						<view class="name ellipsis">小新</view>
					</view>
					<view class="score f14 c373">分数 <text>5</text></view>
				</view>
			</view>
			<!--时间进度信息-->
			<view class="stateBar clear">
				<view class="restTime left stateItem">
					<image class="clock" src="../../static/img/test/clock.png"></image>
					<text>剩余时间1:30</text>
				</view>
				<view class="progress left stateItem">
					<text>1/10</text>
					<view class="groove">
						<view class="stuffing" :style="'width:30%'"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import Socket from '../util/websocket.js'
	import cosBtn from '@/components/cos-btn.vue'
	export default{
		components:{
			cosBtn
		},
		data(){
			return{
				allReady: false,
				ready: true,
				oppenent: false,
				socket: null
			}
		},
		onLoad(){
			this.initSocket()
		},
		methods: {
			start(){
				
			},
			initSocket(){
				// this.socket = new Socket()
				// console.log(this.socket)
				// this.socket.login((msg)=>{
				// 	console.log(msg)
				// 	console.log('登录成功')
				// }, this.$store.state.user.keyid, this.$store.state.user.nickname, this.$store.state.user.token)
				
				
				
				
				let url = `ws://47.114.37.145:8000/login?{"Method":"login", "Body": {"AppId": "${this.$store.state.user.keyid}", "AppKey": "www.zhiyuext.com", "Name": "${this.$store.state.user.nickname}", "Token": "${this.$store.state.user.token}"}}`
				console.log(url)
				let socket = uni.connectSocket({
					url,
					success: (res)=>{
						console.log(res)
					},
					fail: (err)=>{
						console.log(err)
					}
				})
				console.log(socket)
				uni.onSocketOpen(function(res){
					console.log('已连接')
					console.log(res)
				})
				uni.onSocketClose(function(err){
					console.log('已关闭')
					console.log(err)
				})
				uni.onSocketMessage(function(data){
					console.log(data)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.waitPage{
		.headLine{
			margin: 0 60rpx;
			font-size: 14px;
			color: #373737;
			padding-top: 15px;
		}
		.hoster{
			width: 315rpx;
		}
		.romID{
			text-align: right;
			width: 315rpx;
		}
		.romBody{
			margin-top: 70px;
			.card{
				position: relative;
				display: inline-block;
				width: 150px;
				box-sizing: border-box;
				padding: 46px 0 18px 0;
				.label{
					position: absolute;
					width: 100px;
					height: 25px;
					line-height: 25px;
					left: 25px;
					top: -12.5px;
					background: #f79048;
					border-radius: 6px;
					color: #ffffff;
					text-align: center;
					font-size: 14px;
				}
				.photo{
					width: 60px;
					height: 60px;
					border-radius: 30px;
					overflow: hidden;
					margin: 0 45px;
					image{
						width: 60px;
						height: 60px;
					}
				}
				.playerName{
					margin: 15px 0 33px;
					font-size: 12px;
					color: #000;
				}
				.readyStatues{
					font-size: 14px;
					color: #373737;
				}
			}
			.card1{
				background: #f2f2f2;
			}
			.card2{
				background: #dcdcdc;
				.inviteBtn{
					width: 70px;
					height: 25px;
					line-height: 25px;
					color: #ffffff;
					background: #2c95f8;
					border-radius: 12.5px;
				}
			}
		}
	}
	.playingPage{
		width: 750rpx;
		padding-top: 14px;
		.scoreboard{
			text-align: center;
			.player{
				position: relative;
				display: inline-block;
				width: 150px;
				padding-bottom: 13px;
				.label{
					position: absolute;
					width: 100px;
					height: 25px;
					line-height: 25px;
					left: 25px;
					top: -12.5px;
					background: #f79048;
					border-radius: 6px;
					color: #ffffff;
					text-align: center;
					font-size: 14px;
				}
				.playerInfo{
					position: relative;
					.picture{
						position: absolute;
						top: 0;
						left: 20px;
						width: 60px;
						height: 60px;
						border-radius: 30px;
						overflow: hidden;
						image{
							width: 60px;
							height: 60px;
						}
					}
					.name{
						display: flex;
						flex-direction: column;
						justify-content: center;
						text-align: left;
						font-size: 12px;
						color: #000000;
						margin-top: 25px;
						margin-left: 85px;
						height: 60px;
					}
				}
				
				.score{
					padding-left: 20px;
					text-align: left;
					text{
						color: #2c95f8;
					}
				}
			}
			.player1{
				background: #f2f2f2;
			}
			.player2{
				background: #dcdcdc;
			}
		}
		.stateBar{
			margin-top: 15px;
			padding-left: 40rpx;
			font-size: 28rpx;
			color: #2c95f8;
			line-height: 60rpx;
			.restTime{
				padding: 10rpx 20rpx;
				margin-right: 32rpx;
				border-radius: 26px;
				background: #EBF6FF;
				overflow: hidden;		
				.clock{
					width: 32rpx;
					height: 32rpx;
					vertical-align: -10%;
					margin-right: 20rpx;
				}
			}
			.progress{
				padding: 10rpx 0;
				.groove{
					display: inline-block;
					width: 250rpx;
					heigth: 16rpx;
					margin-left: 18rpx;
					vertical-align: 5%;
					border-radius: 8rpx;
					overflow: hidden;
					background: #EBF6FF;
					.stuffing{
						height: 16rpx;
						border-radius: 8rpx;
						overflow: hidden;
						width: 0%;
						transition: width 0.3s;
						background: #2C95F8;
					}
				}
				.grooveAllScreen{
					width: 560rpx;
				}
			}
		}
	}
</style>
